<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>虚拟键盘1</title>
</head>
<style>
    body {
        display: flex;
        overflow: hidden;
        height: 100vh;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: linear-gradient(135deg, rgba(217, 112, 229, 0.475), rgba(163, 146, 71, 0.475));
        animation: toggle 2s ease-in infinite;
    }

    @keyframes toggle {
        0% {
            background: linear-gradient(135deg, rgba(217, 112, 229, 0.475), rgba(163, 146, 71, 0.475));
        }

        50% {
            background: linear-gradient(45deg, rgba(217, 112, 229, 0.475), rgba(116, 190, 236, 0.475));
        }

        100% {
            background: linear-gradient(655deg, rgba(217, 112, 229, 0.475), rgba(98, 229, 89, 0.475));
        }
    }

    .tou {
        width: 600px;
        height: 50px;
        margin-bottom: 30px;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
    }

    .keyword .row {
        display: flex;
        overflow: hidden;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 870px;
    }

    .tou,
    .keyword {
        box-shadow: -3px -3px 5px rgb(63, 63, 63), 3px 3px 5px black;
        border-radius: 5px;
    }

    button {
        margin: 10px;
        width: 60px;
        height: 60px;
        display: block;
        user-select: none;
        box-shadow: -2px -2px 4px rgb(63, 63, 63), 2px 2px 4px black;
        border-radius: 5px;
        background: linear-gradient(135deg, rgba(217, 112, 229, 0.475), rgba(163, 146, 71, 0.475));
        color: aqua;
        font-size: 25px;
        animation: toggle 5s ease-in;
    }

    .row1,
    .row2,
    .row3,
    .row4,
    .row5 {
        display: flex;
        overflow: hidden;
        justify-content: center;
        flex-direction: row;
        align-items: center;
    }

    button:active {
        box-shadow: inset -2px -2px 4px rgb(63, 63, 63), inset 2px 2px 4px black;
        color: yellow;
    }

    .space,
    .backspace {
        margin: 10px 10px 10px 20px;
        height: 60px;
        display: block;
        user-select: none;
        text-align: center;
        line-height: 60px;
        box-shadow: -2px -2px 4px rgb(63, 63, 63), 2px 2px 4px black;
        border-radius: 5px;
        background: linear-gradient(135deg, rgba(217, 112, 229, 0.475), rgba(163, 146, 71, 0.475));
        color: aqua;
        font-size: 25px;
        animation: toggle 5s ease-in;
    }

    .space {
        width: 280px;
    }

    .backspace {
        width: 130px;
    }

    .space:active,
    .backspace:active {
        box-shadow: inset -2px -2px 4px rgb(63, 63, 63), inset 2px 2px 4px black;
        color: yellow;
    }

    .active {
        box-shadow: inset -2px -2px 4px rgb(63, 63, 63), inset 2px 2px 4px black;
        color: yellow;
    }
</style>

<body>
    <div class="tou"></div>
    <div class="keyword">
        <div class="row">
            <div class="row1"> <button>0</button> <button>1</button> <button>2</button> <button>3</button>
                <button>4</button> <button>5</button> <button>6</button> <button>7</button> <button>8</button>
                <button>9</button>
            </div>
            <div class="row2"> <button>Q</button> <button>W</button> <button>E</button> <button>R</button>
                <button>T</button> <button>Y</button> <button>U</button> <button>I</button> <button>O</button>
                <button>P</button>
            </div>
            <div class="row3"> <button>A</button> <button>S</button> <button>D</button> <button>F</button>
                <button>G</button> <button>H</button> <button>J</button> <button>K</button> <button>L</button>
            </div>
            <div class="row4"> <button>Z</button> <button>X</button> <button>C</button> <button>V</button>
                <button>B</button> <button>N</button> <button>M</button>
            </div>
            <div class="row5">
                <div class="space" id="space">space</div>
                <div class="backspace" id="backspace">backspace</div>
            </div>
        </div>
    </div>
    <script>
        let buttons = document.querySelectorAll("button");
        let tou = document.querySelector(".tou");
        let space = document.querySelector("#space");
        let Backspace = document.querySelector("#backspace");
        document.body.addEventListener("keydown",
            function (index) {
                for (let i = 0; i < buttons.length; i++) {
                    if (buttons[i].innerHTML == index.key.toUpperCase()) { buttons[i].classList.add("active"); }
                } tou.innerHTML += index.key;
                if (index.key == "Backspace") { tou.innerHTML = tou.innerHTML.slice(0, -10); }
            });
        document.body.addEventListener("keyup",
            function (index) {
                for (let j = 0; j < buttons.length; j++) {
                    if (buttons[j].innerHTML == index.key.toUpperCase()) { buttons[j].classList.remove("active"); }
                }
            });
        for (let i of buttons) {
            i.addEventListener("mousedown",
                function () { i.className = "action"; tou.innerHTML += i.innerHTML; });
        } for (let j of buttons) { j.addEventListener("mouseup", function () { j.className = ""; }); } space.addEventListener("mousedown", function () { space.classList.add("active"); tou.innerHTML += " "; }); space.addEventListener("mouseup", function () { space.classList.remove("active"); });
        Backspace.addEventListener('mouseup', function () { Backspace.classList.add('active'); tou.innerHTML = tou.innerHTML.slice(0, -1) })
        Backspace.onmouseup = function () { Backspace.classList.remove("active"); };</script>
</body>

</html>